<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#div1{width: 200px; height: 200px; background-color: red; margin: 50px auto 0;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv = document.getElementById('div1')

		/*
			IE/Chrome : onmousewheel （但是firefox下也不报错，会认为是自定义属性）

				用event.wheelDelta  查看滚轮向上和向下的数值
					上：120
					下：-120

					//firefox：undefined

			firefox : DOMMouseScroll 必须用addEventListener (但是IE8及以下会报错，因为IE8及以下如果是添加事件用的是attachEvent)

				用event.detail 查看滚轮向上和向下的数值
					上：-3
					下：3

					//标准IE/Chrome：0
					//IE8及以下：undefined

			return false  
				1)阻止事件的默认行为，只能阻止  obj.on事件名称 = fn 所触发的默认行为

				2)如果是通过addEventListener绑定的事件，需要通过 event.preventDefault()来阻止
		*/

		oDiv.onmousewheel = fn;

		if (oDiv.addEventListener) {
			oDiv.addEventListener('DOMMouseScroll', fn, false);
		};
		//以上就是滚轮事件(不带滚动)的兼容写法

		function fn(ev){
			//alert(1);
			var ev = ev || event;

			//alert(ev.wheelDelta);
			//alert(ev.detail);

			//以下是带有滚动的兼容写法(向上为true，向下为false)
			var b = true;
			if (ev.wheelDelta) {
				b = ev.wheelDelta > 0 ? true : false;
			} else{
				b = ev.detail < 0 ? true : false;
			};

			//alert(b)

			if (b) {
				oDiv.style.height = oDiv.offsetHeight - 10 + 'px';
			} else{
				oDiv.style.height = oDiv.offsetHeight + 10 + 'px';
			};

			//给body加上高度出现滚动条时，要阻止默认行为

			ev.preventDefault && ev.preventDefault();
			return false;		//火狐下无法阻止，因为是事件绑定的第二种形式
		}
	} 
	</script>
</head>
<body style="height:2000px;">
	<div id="div1"></div>
</body>
</html>